<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Cropper</title>
		<script src="../../js/mui.min.js"></script>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/header.css" rel="stylesheet" />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
		<link rel="stylesheet" href="css/cropper.css">
		<link rel="stylesheet" href="css/main.css">
		
		<style>
			
			#container {
				width: 100%;
				position: absolute;
				top: 44px;
				bottom: 0px;
				background: #000000;
			}
			
		</style>
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav title-bar" style="position: fixed;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<a id="cutter" class="mui-pull-right" style="font-size: 15px;color: white;line-height: 40px;">
				<img src="../../image/upload.png" width="20px"/>
			</a>
			<h1 class="mui-title title-content"><b id="chatting-nickname">个人头像</b></h1>
		</header>

		<!-- Content -->
		<div id="container">
			<div class="img-container">
				<img id="image" src="" style="background-color: #000000;">
			</div>
		</div>

		<!-- Scripts -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>

		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
		<script src="https://fengyuanchen.github.io/js/common.js"></script>
		<script src="js/cropper.js"></script>
		<script src="../../js/app.js"></script>

		<script type="text/javascript">
			mui.init();
			
			
			var $image = $('#image');
			//$image.prop("crossOrigin", "anonymous");
			//$image[0].setAttribute("crossOrigin", "anonymous");
			//$image[0].crossOrigin = "Anonymous";
			mui.plusReady(function() {
				//$image[0].crossOrigin = "Anonymous";
				var user = app.getGlobalUserInfo();
				var faceImage = user.faceImageBig;
				// 获取屏幕宽度，设置图片
				//$image.attr('src', app.imgServerUrl + faceImage);
				
				/** ======================== 从相册选择图片 ======================== **/
				// 从相册中选择图片
				console.log("从相册中选择图片:");
				plus.gallery.pick( function(path){
					$image.attr("crossOrigin", "anonymous");
					//$image[0].setAttribute("crossOrigin", "anonymous");
					//$image[0].crossOrigin = "Anonymous";
					//$image.prop("crossOrigin", "Anonymous");
					$image[0].onload = function() {
						console.log("图片加载完毕后执行！");
						faceCutter();
						$("#cutter").on('tap', function() {
							
							plus.nativeUI.showWaiting( "上传中..." );
							//$image[0].crossOrigin = "Anonymous";
							//var cropper = $image.data('cropper');
							//$image[0].setAttribute('crossOrigin', 'anonymous');
							//$image[0].crossOrigin = "Anonymous";
							//$image[0].src = tempPath;
							var result = $image.cropper("getCroppedCanvas");
							if(result) {
								//$image[0].crossOrigin = "Anonymous";
								result.crossOrigin = "Anonymous";
								var base64Url = result.toDataURL();
								
								// 上传头像
								var userinfo = app.getGlobalUserInfo();
								// 与后端联调
								mui.ajax(app.serverUrl + "/user/uploadFaceBase64",{
									data:{
										userId:userinfo.id,
										faceData:base64Url
									},
									dataType:'json',//服务器返回json格式数据
									type:'post',//HTTP请求类型
									timeout:10000,//超时时间设置为10秒；
									headers:{'Content-Type':'application/json'},	              
									success:function(data){
										plus.nativeUI.closeWaiting();
										//服务器返回响应，根据响应结果，分析是否登录成功；
										// 控制台中输入日志
										console.log(JSON.stringify(data));
										if(data.status == 200) {
											// 登录或者注册成功之后，保存全局用户对象到本地缓存
											var userinfo = data.data;
											app.setGlobalUserInfo(userinfo);
											
											// 获取 我 页面的webview，更新小头像
											var meWebview = plus.webview.getWebviewById("me.html");
											// 触发另外一个webview的自定义事件，可以使用mui.fire()
											mui.fire(meWebview, "refresh");
											
											// 获取 头像 页面的webview，更新大头像
											var myfaceWebview = plus.webview.getWebviewById("myface.html");
											mui.fire(myfaceWebview, "refresh-myface");
											
											// 页面跳转
											mui.openWindow("index.html", "index.html");
										} else {
											app.showToast(data.msg, "error");
										}
									},
									error:function(xhr,type,errorThrown){
										//异常处理；
										console.log(type);
									}
								});
							}
						});
					};
					$image[0].src = path;
				}, function ( e ) {
					mui.openWindow("index.html", "index.html");
				}, {filter:"image"} );
				
				/** ======================== 图片裁剪 ======================== **/
				

			});
			
			function faceCutter() {
				
				plus.nativeUI.showWaiting( "请稍等..." );
				//$image[0].crossOrigin = "Anonymous";
				//var $image = $('#image');
				var options = {
					aspectRatio: 1 / 1,
					//checkCrossOrigin: false,
					//checkImageOrigin: false,
					crop: function(e) {
						/* var canvas_img = document.getElementById("image");
						let src = canvas_img.getAttribute('src');
						canvas_img.crossOrigin = "Anonymous";
						//canvas_img.addEventListener("load", imageReceived, false);
						canvas_img.src = src; */
					}
				};
				//$image[0].crossOrigin = "Anonymous";
				// Cropper
				$image.cropper(options);
				
				plus.nativeUI.closeWaiting();
			}
		</script>

	</body>

</html>